<div class="appdetail">
  <form nz-form [formGroup]="validateForm">
    <div class="appIcon-content">
      <nz-upload
        nzName="avatar"
        nzListType="picture-card"
        [nzShowUploadList]="false"
        [nzBeforeUpload]="uploadPreview">
        <ng-container *ngIf="!appPreviewIcon">
          <i nz-icon type="plus"></i>
          <div class="ant-upload-text">上传图标</div>
        </ng-container>
        <img *ngIf="appPreviewIcon" [src]="appPreviewIcon | safeHtml">
      </nz-upload>
      <span class="appIcon-tips" *ngIf="appPreviewIcon">(点击图标可进行图标更换)</span>
      <span class="appIcon-upload-tips" *ngIf="!appPreviewIcon">(请上传app图标)</span>
    </div>
    <nz-form-item>
      <nz-form-label [nzSpan]="4">名称</nz-form-label>
      <nz-form-control [nzSpan]="16">
        <input nz-input type="text" formControlName="appName" placeholder="请输入app名称">
        <nz-form-explain *ngIf="validateForm.get('appName').dirty && validateForm.get('appName').errors">
          app名称不可为空
        </nz-form-explain>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzSpan]="4">类型</nz-form-label>
      <nz-form-control [nzSpan]="16">
        <div class="appType-content">
          <nz-select class="appType-select" formControlName="appType" nzPlaceHolder="选择已有的app类型">
            <nz-option *ngFor="let option of appTypeList"
              [nzValue]="option.value" [nzLabel]="option.label">
            </nz-option>
            <!-- <nz-option *ngIf="appTypeLoading" nzDisabled nzCustomContent>
              <i nz-icon type="loading" class="loading-icon"></i>正在加载app类型...
            </nz-option> -->
          </nz-select>
          <!-- 添加更多类型的按钮(扩展) -->
          <!-- <i class="appType-plus" nz-icon type="plus" theme="outline"
            nz-popover nzTrigger="click"
            [nzTitle]="'添加新的app类型'"
            [nzContent]="moreAppTypeTemplate">
          </i> -->
        </div>
        <nz-form-explain *ngIf="validateForm.get('appType').dirty && validateForm.get('appType').errors">
          app类型不可为空
        </nz-form-explain>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzSpan]="4">链接</nz-form-label>
      <nz-form-control [nzSpan]="16">
        <textarea  nz-input type="text" formControlName="appUrl" placeholder="请输入app链接" nzAutosize></textarea>
        <nz-form-explain *ngIf="validateForm.get('appUrl').dirty && validateForm.get('appUrl').errors">
          app链接不可为空
        </nz-form-explain>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzSpan]="4">兼容平台</nz-form-label>
      <nz-form-control [nzSpan]="16">
        <nz-radio-group formControlName="platform" [nzButtonStyle]="'solid'">
          <label nz-radio-button nzValue="">全部</label>
          <label nz-radio-button nzValue="android">安卓</label>
          <label nz-radio-button nzValue="ios">苹果</label>
          <label nz-radio-button nzValue="offline">停运</label>
        </nz-radio-group>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzSpan]="4">发布顺序</nz-form-label>
      <nz-form-control [nzSpan]="16">
        <input style="width: 30%;" nz-input type="text" formControlName="seqNum">
        <span class="seqNum-tips">(请自行填写发布顺序)</span>
        <nz-form-explain *ngIf="validateForm.get('seqNum').dirty && validateForm.get('seqNum').errors">
          发布顺序必须是正整数数字
        </nz-form-explain>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzSpan]="4">聊天显示</nz-form-label>
      <nz-form-control [nzSpan]="16">
        <div>
          <nz-radio-group formControlName="chatDapp">
            <label nz-radio nzValue="true">是</label>
            <label nz-radio nzValue="false">否</label>
          </nz-radio-group>
          <span class="chatDapp-tips">(在聊天更多选项中显示)</span>
        </div>
      </nz-form-control>
    </nz-form-item>

    <nz-collapse [nzBordered]="false">
      <nz-collapse-panel [nzHeader]="moreDappInfoTemplate" [nzActive]="false" [nzShowArrow]="false">
        <nz-form-item>
          <nz-form-label [nzSpan]="4">版本号</nz-form-label>
          <nz-form-control [nzSpan]="16">
            <input nz-input type="text" formControlName="forWalletVersion" placeholder="app兼容wallet的版本号">
          </nz-form-control>
        </nz-form-item>
        
        <nz-form-item>
          <nz-form-label [nzSpan]="4">唯一代号</nz-form-label>
          <nz-form-control [nzSpan]="16">
            <input nz-input type="text" formControlName="appCode" placeholder="自定义app唯一标识">
          </nz-form-control>
        </nz-form-item>

        <nz-form-item>
          <nz-form-label [nzSpan]="4">自定义属性</nz-form-label>
          <nz-form-control [nzSpan]="16">
            <textarea nz-input formControlName="uiOptions" placeholder="请输入json格式的数据" nzAutosize></textarea>
            <nz-form-explain *ngIf="validateForm.get('uiOptions').dirty && validateForm.get('uiOptions').errors">
              请输入正确的json格式数据
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </nz-collapse-panel>
    </nz-collapse>
  </form>

  <button class="detail-save" nz-button nzType="primary" [nzLoading]="loading" (click)="submitDetail()">
    保存
  </button>
</div>

<!-- 新增app类型(扩展) -->
<!-- <ng-template #moreAppTypeTemplate>
  <div class="moreAppType">
    <input #newAppType nz-input placeholder="请填写新的类型">
    <button nz-button nzType="primary" nzBlock (click)="increateAppType(newAppType.value)">确定</button>
    <span>(保存后新的类型才能生效)</span>
  </div>
</ng-template> -->

<ng-template #moreDappInfoTemplate>
  <div class="moreDappInfo" (click)="showMore()">
    <ng-container *ngIf="!isShowMore">
      <span>点击展开更多dapp信息</span>
      <i nz-icon type="down" theme="outline"></i>
    </ng-container>
    <ng-container *ngIf="isShowMore">
      <i nz-icon type="up" theme="outline"></i>
      <span>点击收起更多dapp信息</span>
    </ng-container>
  </div>
</ng-template>